<template>
	<view :class="currentTheme">
		<a-nabbar name="粉丝团" />
		<view class="u-padding-left-32 u-padding-right-32">
			<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
				<view class="u-padding-top-32 ">
					<view v-if="!type&&loginForm.userType!='issue'&&dataList.length===0" class="u-flex u-flex-col empty">
						<item-image :img="`${aliosCdn}/larp/common-${currentTheme}/fansgroup.png`" width="473" height="428"></item-image>
						<view class="u-margin-top-76 u-text-center">
							<view>
								ta还没有粉丝~
							</view>
							<view class="u-margin-top-40">
								点击加入粉丝团成为ta的首位粉丝！
							</view>
						</view>
					</view>
					<!-- 发行查看发行的粉丝团 不应该看到 上面那个布局 所以应该跟我进入我自己的粉丝团一样查看空白页-->
					<empty  v-if="(type==1 || loginForm.userType=='issue') && dataList.length===0"></empty>
					<rank-king :winnerList="fansHeaderList" :trend="false" numName="荣誉分"></rank-king>
					<!-- <view class="u-flex u-margin-bottom-32" v-if="fansHeaderList.length != 0">
						<view class="fanpai fanTwo text-white u-text-center  u-margin-right-30">
							<view v-if="fansHeaderList[1]" class="u-margin-top-45">
								<item-image :type="'1'"
									:img="fansHeaderList[1].userAvatar || '/static/images/myself/user.png'" :size="100">
								</item-image>
								<view class="u-font-22 u-margin-top-10">{{fansHeaderList[1].userName}}</view>
								<view class="u-font-30 u-margin-top-20">荣誉分：{{fansHeaderList[1].honorScore}}</view>
							</view>
						</view>
						<view class="fanOne  u-text-center u-margin-right-30 text-white" v-if="fansHeaderList[0]">
							<image class="huang u-margin-top-30" src="/static/images/myself/icon_huang.png"></image>
							<item-image :type="'1'"
								:img="fansHeaderList[0].userAvatar || '/static/images/myself/user.png'" :size="100">
							</item-image>
							<view class="u-font-22 u-margin-top-10">{{fansHeaderList[0].userName}}</view>
							<view class="u-font-30 u-margin-top-20">荣誉分：{{fansHeaderList[0].honorScore}}</view>
						</view>
						<view class="fanpai fanThree text-white u-text-center ">
							<view v-if="fansHeaderList[2]">
								<item-image class="u-margin-top-45" :type="'1'"
									:img="fansHeaderList[2].userAvatar || '/static/images/myself/user.png'" :size="100">
								</item-image>
								<view class="u-font-22 u-margin-top-10">{{fansHeaderList[2].userName}}</view>
								<view class="u-font-30 u-margin-top-20">荣誉分：{{fansHeaderList[2].honorScore}}</view>
							</view>

						</view>
					</view> -->
					
					<view v-for="(data,index) in dataList" :key="index" class="u-margin-bottom-20">
						<item-box padding="30">
							<view class="u-flex u-row-between">
								<view class="u-flex">
									<view class="u-margin-right-40">
										<image-number :number="fansHeaderList.length+index+1"></image-number>
									</view>
									<view class="u-flex">
										<item-image :type="'1'" :img="data.userAvatar" :size="88" />
										<view class="content-desc-item u-font-32  u-margin-left-30">{{data.userName}}</view>
									</view>
								</view>
								<text v-if="form.inviteUserType"
									class="u-font-28 content-desc-item">{{data.honorScore}}</text>
							</view>
						</item-box>
					</view>
				</view>
			</mescroll-body>
		</view>
		<fixed-team :btnText="`${isJoin ? '退出' : '加入'}粉丝团`" @btnClick="addFan"  v-if="!type&&loginForm.userType!='issue'&&loginForm.uid"></fixed-team>
	</view>
</template>

<script>
	import {
		add,
		deleteIds,
		getDetail
	} from '@/api/crud.js'
	import upCallback from '@/mixins/upCallbackMixin.js'
	import rankKing from '@/pagesA/acomponents/rankKing/rankKing.vue'
	import imageNumber from '@/components/imageNumber/imageNumber.vue'	
	import empty from '@/components/mescroll-uni/components/mescroll-empty.vue'
	export default {
		name: "index",
		components: {
			rankKing,imageNumber,empty
		},
		mixins: [upCallback],
		data() {
			return {
				apiModule: 'shopApi',
				apiType: 'fansGroup',
				form: {
					inviteUserType: '',
					inviteUid: ''
				},
				dataList: [],
				option: {},
				type: '',
				isJoin: false, //是否加入粉丝团
				fansHeaderList: [],
				upOption:{
					empty:{
						use:false,
						// icon:`${this.aliosCdn}/larp/common-${this.currentTheme}/fansgroup.png`,
						// tip:'ta还没有粉丝~点击加入粉丝团成为ta的首位粉丝！',
					}
				}
			}
		},
		computed: {
			name() {
				return this.form.inviteUserType == 'store' ? 'getFansGroupsByStore' : ''
			},
		},
		onLoad(option) {
			this.type = option.type || ''
			this.form.inviteUid = option.uid || this.loginForm.uid
			this.form.inviteUserType = option.userType  || this.loginForm.userType || 'store'
			this.form.uid = ''
			this
			if (this.loginForm.uid&&option.uid) {
				this.isFansGroup(option.uid)
			}
		},
		methods: {
			dataListCallBack({
				content
			}) {
				if (content.length > 3) this.fansHeaderList = content.slice(0, 3).map(val=>({
					avatar:val.userAvatar,
					nickname:val.userName,
					total:val.honorScore,
					...val
				}))
				if(this.fansHeaderList.length==3){
					this.dataList = this.dataList.slice(3)
				}
			},
			//是否加入当前用户粉丝团
			isFansGroup(uid) {
				getDetail({
					uid
				}, this.apiType, this.apiModule, 'getIdByCurrentFansGroup').then(res => this.isJoin = !!res)
			},
			//加入
			addFan() {

				const item = this.loginForm
				console.log(item)
				const isMeFansGroup = this.form.inviteUid === this.loginForm.uid
				if(!item.userType){
					this.planformValidate()
					return false;
				}
				if (isMeFansGroup) {
					this.$u.toast('不要加入自己的粉丝团')
					return false;
				}
				if (!this.isJoin) {
					console.log(this.isJoin,'加入');
					let params = {
						inviteUid: this.form.inviteUid,
						inviteUserType: this.form.inviteUserType,
						uid: item.uid,
						userType: item.userType || 'store',
					}
					add(params, this.apiType, this.apiModule, 'create').then(res => {
						this.$u.toast('添加成功')
						this.downCallback();
						this.isFansGroup(this.form.inviteUid)
					})
				} else {
					uni.showModal({
						title:'温馨提示',
						content:'是否退出粉丝团？',
						success:({confirm,cancel})=>{
							if(confirm) {
								const list = [...this.dataList,...this.fansHeaderList]
								const res = list.find(val => val.uid == item.uid) || {}
								console.log(item,list)
								this.removeIds(res.id)
							}
							if(cancel) {
								this.$u.toast('取消')
							}
						},
					})
				}
			},
			//删除
			removeIds(id) {
				if(!id) {
					this.$u.toast('出错啦')
					return false;
				}
				deleteIds('', this.apiType, this.apiModule, id).then(res => {
					this.$u.toast('退出成功')
					this.downCallback();
					this.isFansGroup(this.form.inviteUid)
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/.fansList {
		width: 100%;
		height: 160rpx;
		border-radius: 26rpx;
		background: #1f1b34;
		padding-left: 22rpx;
		padding-right: 50rpx;
		margin-bottom: 16rpx;

		.fenshu {
			position: absolute;
			right: 59rpx;
		}
	}

	.fanOne {
		width: 226rpx;
		height: 324rpx;
		background-size: 100% 100%;

		.huang {
			width: 38rpx;
			height: 34rpx;
		}
	}

	.fanpai {
		width: 200rpx;
		height: 280rpx;
	}

	// .fanThree {
	// }

	.fanTwo {
		background-size: 100% 100%;
	}
	.empty{
		margin-top: 173rpx;
	}
</style>
